<template>
	<div>	
	  <div class='header'>
         <img :src="userInfo.avatar" class="blur" v-if="userInfo.avatar"/>
         <img src="../../../../../static/img/lanhu/45.png" class="blur" v-else/>
         <div class="blur_mask"></div>
         
         <div class="wrap">         	
         	<div style="margin-bottom: 15px;display: flex;justify-content: space-between;" 
         		@click="back">
         		<van-icon name="arrow-left" color="#fff" size="20" />
         	</div>

         	
         	<div class="wrap1">
         		<div class="a">
         			<img :src="userInfo.avatar" alt="" class="wrap1Img" v-if="userInfo.avatar"/>
         			<img src="../../../../../static/img/lanhu/45.png" alt=""  v-else class="wrap1Img"/>
         		</div>
         		<div class="b">
         			<div class="b1">{{userInfo.userName}}</div>
         			<div class="b2" style="margin-bottom: 5px;">昵称: {{userInfo.nickName}}</div>
         			<div class="b2">{{formatTime(userInfo.loginTime)}}来过集市</div>
         		</div>
         		<div class="c" v-if="!isSelf">
         			<!--关注过显示已关注-->
         			<img src="../../../../../static/img/lanhu/67.png" alt="" style="width: 55px;" v-if="flag" @click="cancelFollow"/>
         			<!--没有关注过显示 关注-->
         			<img src="../../../../../static/img/lanhu/07.png" alt="" style="width: 50px;" v-else @click="addFollow"/>
         		</div>
         	</div>
         	
         	<div style="padding-bottom: 10px;">  
         		<span style="color: #fff;margin-right: 20px;" @click="linkList(0)">{{userInfo.myAttention}} 关注</span>
         		<span style="color: #fff;margin-right: 20px;" @click="linkList(1)">{{userInfo.myFans}} 粉丝</span>
         		<span style="color: #fff;" @click="linkList(2)">{{userInfo.myAdmire}} 点赞</span>
         	</div>
         </div>
      </div>
      
      <div>
		<van-tabs v-model="activeName" color="#FFD630">					  	
		  <van-tab :title="aTitle" name="a">
		  	  <div class="ta">		  	  	 
		  	  	 <div class="taSection" v-for="(item,index) in goodsList" :key="index" @click="linkDetail(item)">
		  	  	 	<div  class="imgWrap"
		  	  	 		:style="{backgroundImage: 'url(' + item.goodsImage + ')'}"
		  	  	 		>		  	  	 	   
		  	  	 	</div>
		  	  	 	<div class="title">{{item.comDesc}}</div>
		  	  	 	<div class="info">
		  	  	 		<div style="color: #FF3B30;padding-top: 2px;">
		  	  	 			&yen;<span style="margin-left: 4px;color: #FF3B30;">{{item.comPrice}}</span>
		  	  	 		</div>
		  	  	 		<div style="color: #999;">{{item.goodsWants}}人想要</div>
		  	  	 	</div>
		  	  	 </div>
		  	  </div>
		  </van-tab>
		  
		  
		  
		  <van-tab :title="bTitle" name="b">
		  	<div class="pj">
		  		<div>
		  			<span class="pj_tag" :class="{active:commentActive==0}" @click="changeCommentTab(0)">全部{{allCommentList.length}}</span>
		  			<span class="pj_tag" :class="{active:commentActive==1}" @click="changeCommentTab(1)">好评{{goodCommentList.length}}</span>
		  			<span class="pj_tag" :class="{active:commentActive==2}" @click="changeCommentTab(2)">有图{{imgCommentList.length}}</span>
		  		</div>
		  		
		  		
		  		<div class="pj_ul" v-show="commentActive==0">
			  		<div class="pj_li" v-for="(item,index) in allCommentList" :key="index">
			  			<div>
			  				<img :src="item.avatar" alt="" class="pj_people" v-if="item.avatar"/>
			  				<img src="../../../../../static/img/lanhu/45.png" alt="" class="pj_people" v-else/>
			  			</div>			  			
			  			<div class="right">
			  				<div>
			  					<div style="color: #999;">来自{{item.nickName}}的评论</div>
			  					<div style="margin: 5px 0;">{{item.commentTxt}}</div>
			  					
			  					<div class="commentImgWrap">
			  						<img :src="item1" alt="" class="commentImg" @click="showRowImg(item1)" v-for="(item1,index1) in formatArr(item.commentImage)"/>
			  					</div>
			  								  					
			  					<div style="color: #999;">{{item.commentAddtime}}</div>
			  				</div>
			  				<div>
                                <img src="../../../../../static/img/lanhu/66.png" alt="" v-if="item.commentIsgood>0"/>
			  				</div>
			  			</div>
			  		</div>		  		
		  		</div>	  
		  		
		  		<div class="pj_ul" v-show="commentActive==1">
			  		<div class="pj_li" v-for="(item,index) in goodCommentList" :key="index">
			  			<div>
			  				<img :src="item.avatar" alt="" class="pj_people" v-if="item.avatar"/>
			  				<img src="../../../../../static/img/lanhu/45.png" alt="" class="pj_people" v-else/>
			  			</div>			  			
			  			<div class="right">
			  				<div>
			  					<div style="color: #999;">来自{{item.nickName}}的评论</div>
			  					<div style="margin: 5px 0;">{{item.commentTxt}}</div>
			  					<div class="commentImgWrap">
			  						<img :src="item1" alt="" class="commentImg" @click="showRowImg(item1)" v-for="(item1,index1) in formatArr(item.commentImage)"/>
			  					</div>			  					
			  					<div style="color: #999;">{{item.commentAddtime}}</div>
			  				</div>
			  				<div>
			  					<img src="../../../../../static/img/lanhu/66.png" alt="" v-if="item.commentIsgood>0"/>
			  				</div>
			  			</div>
			  		</div>		  		
		  		</div>	 
		  		
		  		<div class="pj_ul" v-show="commentActive==2">
			  		<div class="pj_li" v-for="(item,index) in imgCommentList" :key="index">
			  			<div>
			  				<img :src="item.avatar" alt="" class="pj_people" v-if="item.avatar"/>
			  				<img src="../../../../../static/img/lanhu/45.png" alt="" class="pj_people" v-else/>
			  			</div>			  			
			  			<div class="right">
			  				<div>
			  					<div style="color: #999;">来自{{item.nickName}}的评论</div>
			  					<div style="margin: 5px 0;">{{item.commentTxt}}</div>
			  					<div class="commentImgWrap">
			  						<img :src="item1" alt="" class="commentImg" @click="showRowImg(item1)" v-for="(item1,index1) in formatArr(item.commentImage)"/>
			  					</div>			  					
			  					<div style="color: #999;">{{item.commentAddtime}}</div>
			  				</div>
			  				<div>
                                <img src="../../../../../static/img/lanhu/66.png" alt="" v-if="item.commentIsgood>0"/>
			  				</div>
			  			</div>
			  		</div>		  		
		  		</div>	 		  		
		  		
		  	</div>
		  </van-tab>
		</van-tabs>      
      </div>
      <rowimg ref="rowImg"></rowimg>
	</div>	
</template>

<script>
import rowimg from '_c/rowImg.vue'		
import QRCode  from "qrcodejs2"	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {			
	name:'myInfo',
	data() {
       return {
          activeName:'a',
          url1:this.$api+'/marketorderservice/api/v1/market/goods/selectGoodsList',// 获取发布者发布过的商品
          url2:this.$api+'/marketorderservice/api/v1/market/userManager/',  // 获取用户信息
          url3:this.$api+'/marketorderservice/api/v1/market/commentList/',  // 获取评论列表
          url4:this.$api+'/marketorderservice/api/v1/market/attention/addAttention',// 关注操作
          url5:this.$api+'/marketorderservice/api/v1/market/attention/cancelAttention/',// 取消关注
          goodsList:[],  // 记录商品列表
          allCommentList:[], // 记录全部评论列表
          goodCommentList:[], // 记录好评评论列表
          imgCommentList:[],  // 记录有图评论列表
          commentActive:0,    // 记录当前选中的评论类型
          aTitle:'',   // 记录tabs a的标题
          bTitle:'',   // 记录tabs b的标题
          userInfo:{}, // 记录用户信息
          userId:'',   // 登录者的用户ID
          userId2:'',   // 被查看者的用户ID
          isSelf:false, // 是否是自己查看自己 取决于上方两个ID 是否相同
          flag:false,   // 记录是否关注过
       }
	},		
	components: { QRCode,rowimg},
	methods: {
		back(){
          this.onClickLeft()
		},
		linkDetail(item){
	   	   let arg='[{"comId":"'+item.comId+'"}]' 
	   	   this.link('/market/goods/detail',arg)			
		},
		formatArr(str){
			if(str){
				str=str.split(',')
				return str
			}else{
				return []
			}       			
		},
		// 放大图片
		showRowImg(src){
			this.$refs.rowImg.showWin(src)
		},
		// 添加关注
		addFollow(){
		  let that=this
          let params={
			  "fuserId": this.userId,
			  "userId":this.userId2           	
          }
		  this.$Axios2.Post(this.url4, params).then(function(res) {
		  	  that.$toast('关注成功')
              that.flag=true
              that.userInfo.myFans=Number(that.userInfo.myFans)+1
		  })			
		},
		// 取消关注
		cancelFollow(){
		  let that=this	  
		  this.$Axios2.Get(this.url5+this.userId+'/'+this.userId2).then(function(res) {
		  	 that.$toast('取关成功')
             that.flag=false
             that.userInfo.myFans=Number(that.userInfo.myFans)-1
		  })			
		},
		// 进入关注粉丝点赞列表
		linkList(num){			
			if(this.userId==this.userId2){
				switch(num) {
			     case 0:
			        this.link('/market/manager/follow')
			        break;					 
			     case 1:
			        this.link('/market/manager/fans')
			        break;
			     case 2:
			        this.link('/market/manager/dz')
			        break;
				} 				
			}			
		},
		// 切换评论类型
		changeCommentTab(num){
		  this.commentActive=num
		},
		// 转化时间
		formatTime(str){
			return this.timeago(str)
		},
		// 获取发布商品列表
		getData(){	
		  let that=this
		  let userId=this.isSelf?this.userId:this.userId2;
		  this.$Axios2.Post(this.url1, {comUid:userId}).then(function(res) {
			that.goodsList=res.data
			that.aTitle='TA的'+' '+res.data.length
		  })
		},
		// 获取个人信息
		getInfo(){
		  let that=this
		  this.$Axios2.Get(this.url2+this.userId2+'/'+this.userId).then(function(res) {
		  	that.userInfo=res.data
		  	that.flag=res.data.flag
		  })
		},
		// 获取评论列表
		getCommentList(){
		  let that=this
		  let userId=this.isSelf?this.userId:this.userId2;	
		  this.$Axios2.Get(this.url3+userId).then(function(res) {		  	
		  	that.allCommentList=res.data.list1
		  	that.goodCommentList=res.data.list2
		  	that.imgCommentList=res.data.list3
		  	that.bTitle='评论'+' '+res.data.list1.length
		  })		  
		}
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.userId=this.$router.currentRoute.query.userId;		
		this.userId2=this.$router.currentRoute.query.userId2;	
		if(!this.userId2){
			this.userId2=this.userId
		}
		if(this.userId2==this.userId){
			this.isSelf=true
		}
        this.getData()
        this.getInfo()
        this.getCommentList() 
	}
}	
</script>

<style scoped lang="scss">   
*{box-sizing: border-box;}
.header{width: 100%;height: 170px;position: relative;overflow:hidden}
.blur {    
 width: 100%;
 height: 100%;	
 -webkit-filter: blur(40px); 
 -moz-filter: blur(40px);
 -ms-filter: blur(40px);    
 filter: blur(40px); 
}
.blur_mask{width: 100%;position: absolute;top: 0;z-index:99;left: 0;background:rgba(51,51,51,.4);height: 100%;}
.imgWrap{width: 100px;height: 100px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}
.wrap{position: absolute;width: 100%;top: 0;z-index: 100;padding: 20px 20px 10px 15px;}
.wrap1{display: flex;width: 100%;margin-bottom: 15px;
    .c{width: 50px;padding-top: 3px;}
	.b{margin-left: 10px;flex: 1;
		.b1{
			font-size: 17px;color: #fff;margin-bottom:5px;
		}
		.b2{font-size: 12px;color: #fff;}
	}
}
.wrap1Img{width: 60px;height:65px;border-radius: 8px;}
.ta{display: flex;flex-wrap: wrap;padding: 15px;}
.taSection{width: 32%;margin-right: 2%;margin-bottom: 2%;padding: 5px;
	.title{margin-top: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;min-height: 0.835rem;}
	.info{display: flex;justify-content: space-between;margin-top: 10px;align-items: center;}
}
.taSection:nth-child(3n){margin-right: 0;}
.pj{padding: 15px;}
.pj_tag{color: #999;border:1px solid #999;padding: 6px 14px;border-radius: 20px;margin-right: 10px;}
.pj_tag.active{background: #FFD630;border:1px solid #FFD630;color: #333;}
.pj_people{width: 54px;height: 54px;border-radius: 4px;}
.pj_li{padding: 30px 0 0px;display: flex;
	.right{margin-left: 14px;flex: 1;padding-bottom: 15px;display: flex;
	border-bottom: 1px solid #e5e5e5;justify-content: space-between;
	   img{display: block;width: 18px;height: 18px;}
	   .commentImgWrap{display: flex;margin-bottom: 5px;
	     .commentImg{width: 60px;height: 60px;margin-right: 10px;border-radius: 2px;}
	   }
	}
}




</style>